﻿//Placed outside .ready for scoping
var targetX, targetY;
var tagCounter = 0;

$(document).ready(function () {
    //Dynamically wrap image
    $("img").wrap('<div id="tag-wrapper"></div>');

    //Dynamically size wrapper div based on image dimensions
    $("#tag-wrapper").css({ width: $("img").outerWidth(), height: $("img").outerHeight() });

    //Append #tag-target content and #tag-input content
    $("#tag-wrapper").append('<div id="tag-target"></div><div id="tag-input"><label for="tag-name">Person\'s Name:</label><input type="text" id="tag-name"><button type="submit">Submit</button><button type="reset">Cancel</button></div>');

    //$("#tag-wrapper").click(function(e){
    $("img").click(function (e) {
        //Determine area within element that mouse was clicked
        mouseX = e.pageX - $("#tag-wrapper").offset().left;
        mouseY = e.pageY - $("#tag-wrapper").offset().top;

        //Get height and width of #tag-target
        targetWidth = $("#tag-target").outerWidth();
        targetHeight = $("#tag-target").outerHeight();

        //Determine position for #tag-target
        targetX = mouseX - targetWidth / 2;
        targetY = mouseY - targetHeight / 2;

        //Determine position for #tag-input
        inputX = mouseX + targetWidth / 2;
        inputY = mouseY - targetHeight / 2;

        //Animate if second click, else position and fade in for first click
        if ($("#tag-target").css("display") == "block") {
            $("#tag-target").animate({ left: targetX, top: targetY }, 500);
            $("#tag-input").animate({ left: inputX, top: inputY }, 500);
        } else {
            $("#tag-target").css({ left: targetX, top: targetY }).fadeIn();
            $("#tag-input").css({ left: inputX, top: inputY }).fadeIn();
        }

        //Give input focus
        $("#tag-name").focus();
    });

    //If cancel button is clicked
    $('button[type="reset"]').click(function () {
        closeTagInput();
    });

    //If enter button is clicked within #tag-input
    $("#tag-name").keyup(function (e) {
        if (e.keyCode == 13) submitTag();
    });

    //If submit button is clicked
    $('button[type="submit"]').click(function () {
        submitTag();
    });

}); //$(document).ready

function submitTag() {
    tagValue = $("#tag-name").val();

    //Adds a new list item below image. Also adds events inline since they are dynamically created after page load
    $("#tag-wrapper").after('<p id="hotspot-item-' + tagCounter + '">' + tagValue + ' <span class="remove" onclick="removeTag(' + tagCounter + ')" onmouseover="showTag(' + tagCounter + ')" onmouseout="hideTag(' + tagCounter + ')">(Remove)</span></p>');

    //Adds a new hotspot to image
    $("#tag-wrapper").append('<div id="hotspot-' + tagCounter + '" class="hotspot" style="left:' + targetX + 'px; top:' + targetY + 'px;"><span>' + tagValue + '</span></div>');

    tagCounter++;
    closeTagInput();
}

function closeTagInput() {
    $("#tag-target").fadeOut();
    $("#tag-input").fadeOut();
    $("#tag-name").val("");
}

function removeTag(i) {
    $("#hotspot-item-" + i).fadeOut();
    $("#hotspot-" + i).fadeOut();
}

function showTag(i) {
    $("#hotspot-" + i).addClass("hotspothover");
}

function hideTag(i) {
    $("#hotspot-" + i).removeClass("hotspothover");
}